<style lang='scss' type='stylesheet/scss' scoped>
.as-button {
  margin-bottom: 10px;
}
</style>
<template>
  <div>
    <as-h2>checkbox-group 多选组</as-h2>

    <as-card :text="text"
             title="多个选项的集合，可管理多个多选框，在 as-checkbox-group 中绑定 v-model 为 Array，checkbox 也不用绑定 v-model，只需绑定 label，label 即是该多选框的值，也是多选框后的介绍(可在后方自定义介绍)">
      <as-checkbox-group v-model="checkPlanList">
        <as-checkbox label="运动"></as-checkbox>
        <as-checkbox label="学习"></as-checkbox>
        <as-checkbox disabled label="睡觉">休息</as-checkbox>
        <as-checkbox disabled label="吃饭"></as-checkbox>
      </as-checkbox-group>
    </as-card>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "",
  data() {
    return {
      checkPlanList: ["运动", "吃饭"],
      text: `<template>
   <as-checkbox-group v-model="checkPlanList">
     <as-checkbox label="运动"></as-checkbox>
     <as-checkbox label="学习"></as-checkbox>
     <as-checkbox disabled label="睡觉">休息</as-checkbox>
     <as-checkbox disabled label="吃饭"></as-checkbox>
   </as-checkbox-group>
 </template>
 <script>
 export default {
   data() {
     return {
       checkPlanList: ["运动", "吃饭"]
     }
   }
 }
 <\/script>`
    };
  }
};
</script>
